<template>
  <div class="echarts">
    <div :style="{height:'520px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
  import echarts from "echarts";
    import '../../../node_modules/echarts/map/js/province/xinjiang.js'
  // import '../charts/china.js' // 引入中国地图数据
  export default {
    name: "ChartMap",
    props: ["userJson"],
    data() {
      return {
        chart: null
      };
    },
    mounted() {
      this.chinaConfigure();
    },
    beforeDestroy() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    methods: {
      chinaConfigure() {
        console.log(this.userJson)
        let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
        window.onresize = myChart.resize;
        myChart.setOption({ // 进行相关配置
          backgroundColor: "#fff",
          tooltip: {}, // 鼠标移到图里面的浮动提示框
          dataRange: {
              x: 'left',
            y: 'bottom',
            splitList: [
                {start: 0, end: 0, label: '未建成',color: '#64f3ee'},
                {start: 1, end: 10, label: '已建成', color: '#11c2bc'},
            ],
            color: ['#eee', '#949fb1', '#f3ce85']
          },
          geo: { // 这个是重点配置区
            map: '新疆', // 表示中国地图
            roam: false,
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: 'rgba(0,0,0,0.4)'
                }
              }
            },
            layoutSize: 600,
            layoutCenter: ['50%', '50%'],
            itemStyle: {
              normal: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                borderColor: '#ffffff',//区域边框颜色
                areaColor:"#ffefd5",//区域颜色
              },
              emphasis: {
                areaColor: '#ffdead',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
         
          series: [{
              type: 'scatter',
              coordinateSystem: 'geo' // 对应上方配置
            },
            {
              name: '平台数', // 浮动框的标题
              type: 'map',
             // map:'新疆',
              geoIndex: 0,
              data: [ 
                 {
                "name": "乌鲁木齐",
								"value": 0,
							
              },{
                "name": "克拉玛依市",
								"value": 1,
								
              }, {
                "name": "吐鲁番市",
								"value": 2,
								
			  }, 
			  {
                 "name": "哈密市",
			 				  	"value": 3,
							
			   }, 
			   {
                "name": "昌吉回族自治州",
								"value": 4,
						
              },
              
			   {
                "name": "博尔塔拉蒙古自治州",
								"value": 5,
							
              },
               {
                "name": "巴音郭勒蒙古自治州",
								"value": 6,
							
              },
               {
                "name": "阿克苏地区",
								"value": 7,
							
								
              },
               {
                "name": "克孜勒苏柯尔克孜自治州",
								"value": 8,
							
              },
               {
                "name": "喀什地区",
								"value": 9,
								
			  },
			    {
                "name": "阿勒泰地区",
								"value": 10,
								
			  },
			    {
                "name": "石河子市",
								"value": 11,
							
			  },
			    {
                "name": "阿拉尔市",
								"value": 12,
							
			  },
			    {
                "name": "图木舒克市",
								"value": 13,
							
			  },
			    {
                "name": "伊利哈萨克自治州",
								"value": 14,
								
			  },
			    {
                "name": "塔城地区",
								"value": 15,
								
			  },
			    {
                "name": "五家渠市",
								"value": 16,
							
			  },
			    {
                "name": "北屯市",
								"value": 17,
								
			  },
			    {
                "name": "铁门关市",
								"value": 18,
							
			  },
			    {
                "name": "双河市",
								"value": 19,
          },
			    {
                "name": "可克达拉市",
								"value": 20,
								
			  },
			    {
                "name": "昆玉市",
								"value": 21,
								
			  },
			   {
                "name": "和田地区",
								"value": 22,
								
			  },
			    {
                "name": "胡杨河市",
								"value": 23,
								
              },
              
              ]	
            }
          ]
        })
      }
    }
  }
</script>